<template>
  <div>
    <div style="width: 100%">
      <div style="width: 100%;margin-top: 30px;margin-bottom: 10px">
        <table style="width: 100%;border: 0px red solid;background-color: dodgerblue">
          <tr style="border: 0;">
            <td style="border: 0;text-align: left;vertical-align: bottom;">
              <h3 style="color: white">用户列表</h3>
              <h4 style="color: white;margin-bottom: 0px">当前用户:${LoginUser}</h4>
            </td>
            <td style="vertical-align: bottom;border: 0px;text-align: center">
              <form action="/root/list" method="post" style="margin: 0px" class="form-inline">
                <h4 style="color:white;display: inline">按:</h4>
                <select class="form-control" name="conIndex" id="select1">
                  <option value="0">全部</option>
                  <option value="1">id号</option>
                  <option value="2">用户名</option>
                  <option value="3">部门</option>
                </select>
                <input class="form-control" name="text_search" type="text">
                <input class="btn btn-warning" type="submit" value="查找用户"/>
              </form>
            </td>
            <td style="text-align: right;border: 0px;vertical-align: bottom">
              <button class="btn btn-info" id="button1">添加用户</button>
              <button class="btn btn-danger" id="button2">退出系统</button>
            </td>
          </tr>
        </table>
      </div>
      <table class="table table-hover">
        <tr>  <!-- 列头固定部分，不变 -->
          <th>序号</th>
          <th>id号</th>
          <th>用户名</th>
          <th>密码</th>
          <th>部门</th>
          <th>创建人</th>
          <th>创建日期</th>
          <th>备注</th>
          <th>操作项</th>
        </tr>
        <tr v-for="(user,index) in users" v-bind:key="user"><!--此处为users为后端返回来的数据-->
          <td>{{ index }}</td>
          <td>{{ user.id }}</td>
          <td>{{ user.username }}</td>
          <td>{{ user.password }}</td>
          <td>{{ user.dept }}</td>
          <td>{{ user.createUser }}</td>
          <td>{{ user.createDate }}</td>
          <td>{{ user.remark }}</td>
          <td>
            <!--            <a href="/root/deleteById/?id" +{{users.id}}>删除</a>-->
            <!--            <a href="/root/modifyById/?id" +{{users.id}}>修改</a>-->
            <a :href="'/users/deleteById?id='+user.id">删除</a>
            <a :href="'/users/modifyById?id='+user.id">修改</a>
          </td>
        </tr>
      </table>
    </div>
    <div style="width:90%;text-align: right">
      共计:<span id="spanPage1">{{ pageCount }}</span>页
      当前第:<span id="spanPage">{{ pageNum }}</span>页
      <button class="btn btn-info" @click="UpPage" id="b1">上一页</button>
      <button class="btn btn-info" @click="NextPage" id="b2">下一页</button>
    </div>
  </div>

</template>
<script>
import axios from "axios"   //引入axios向后端发送异步请求
export default {
  name: "UserView", //组件名称
  data() {
    return {
      users: [], //表格中要显示的数据,这是一个JSON数组
      pageNum: 1, //当前页号
      pageSize: 3, //每页的记录数
      pageCount: 1 //总页数
    }
  },
  created() {
    const that = this
    // alert("设置弹窗")
    axios.get('/users/listAll/' + this.pageNum + '/' + this.pageSize)
        // axios.get('http://localhost:8080/user/listAll'+'/'+this.pageNum+'/'+this.pageSize)
        .then(function (res) {
          console.log(res.data)
          that.users = res.data  //将返回的数据给users数组
          that.pageCount = res.data[res.data.length - 1].pageCount //取总页数，Json数组的最后一行是分页信息
        }).catch(function (res) {
      // eslint-disable-next-line no-undef
      console.log(res, data)
    })
  },
  methods: {
    NextPage() {
      const that = this
      if (this.pageNum === this.pageCount) {
        return //如果当前页号是最后一页，那么点击按钮直接返回
      } else {
        that.pageNum += 1 //当前页号加1
      }
      axios.get('/users/listAll/' + this.pageNum + '/' + this.pageSize)
          // axios.get('http://localhost:8080/user/listAll'+'/'+this.pageNum+'/'+this.pageSize)
          .then(function (res) {
            console.log(res.data)
            that.users = res.data  //将返回的数据给users数组
            that.pageCount = res.data[res.data.length - 1].pageCount //取总页数，Json数组的最后一行是分页信息   取数组中最后一个元素的总页数
          }).catch(function (res) {
        // eslint-disable-next-line no-undef
        console.log(res, data)
      })
    },
    UpPage() {
      const that = this
      if (this.pageNum === 1) {
        return //如果当前页号是最后一页，那么点击按钮直接返回
      } else {
        that.pageNum -= 1 //当前页号减1
      }
      axios.get('/users/listAll/' + this.pageNum + '/' + this.pageSize)
          // axios.get('http://localhost:8080/user/listAll'+'/'+this.pageNum+'/'+this.pageSize)
          .then(function (res) {
            console.log(res.data)
            that.users = res.data  //将返回的数据给users数组
            that.pageCount = res.data[res.data.length - 1].pageCount //取总页数，Json数组的最后一行是分页信息
          }).catch(function (res) {
        // eslint-disable-next-line no-undef
        console.log(res, data)
      })
    }
  }
}

</script>
<style scoped>
th, tr, td {
  border: 2px solid white;
}

a {
  color: black;
}
</style>
